<template>
  <div class="orderdetail">
    <van-nav-bar
      title="交易详情"
      left-text="上一页"
      right-text="我的"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="item">
      <p><van-icon name="arrow-left" />购买时间：{{ orddetail | time }}</p>
      <van-card
        v-for="det in orddetail.details"
        :key="det.id"
        :num="det.amount"
        :price="orddetail.price.toFixed(2)"
        :desc="orddetail.desc"
        :title="det.product.name"
        :thumb="det.product.coverImage | imgUrl"
      >
      </van-card>
      <p class="sumprice">总价：￥{{ orddetail.price }}</p>
      <van-collapse v-model="activeNames">
        <van-collapse-item name="1">
          <template #title>
            <div>订单详情 <van-icon /></div>
          </template>
          <ul>
            <li>
              收货信息：{{ orddetail.receiver + "," + orddetail.address }}
            </li>
            <li>订单编号：{{ orddetail.id }}</li>
            <li>创建时间：{{ orddetail.createdAt | time }}</li>
          </ul>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script>
import { orderDetail } from "../services/order.js";
export default {
  data() {
    return {
      orddetail: {},
      activeNames: ["1"],
    };
  },
  created() {
    orderDetail(this.$route.query.id).then((res) => {
      this.orddetail = { ...res.data };
    });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push({
        name: "User",
      });
    },
  },
};
</script>

<style scoped>
p {
  background: #fafafa;
  margin: 0;
  text-align: left;
  padding: 5px;
  line-height: 30px;
}
.sumprice {
  background: #fafafa;
  margin-top: 0;
  text-align: right;
}
.item {
  width: 98vw;
  border: 1px solid #dddddd;
  border-radius: 10px;
  margin: 10px auto;
}
>>> .van-card {
  margin: 0;
}
</style>
